<!--
  * @Description 字典管理 字典项列表
  * @Author 莫发达
  * @create 2024-09-19 11:10 周四
-->
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import DictList from './DictList.vue' // 字典列表
import ItemList from './ItemList.vue'
import type { IDict } from '@root/types/system/dict.ts'
import localDict from '@/utils/origin-dict.ts'
import dictApi from '@/api/modules/dict'
import { ElMessage } from 'element-plus' // 字典项列表

const currentDict = ref()

/**
 */
const dictList = ref<IDict[]>([])

/**
 * 格式化本地字典，和服务器数据同步
 */
function formatterDict(): IDict[] {
  return Object.keys(localDict).map((key) => {
    return {
      dictCode: key,
      dictName: '',
      enableFlag: '10',
      type: '前端',
      children: localDict[key].map((item, index) => ({
        dictItemCode: item.key,
        dictItemName: item.label,
        dictItemTag: '',
        enableFlag: '10',
        sort: index
      }))
    }
  }) as IDict[]
}

onMounted(async () => {
  const { data, code, message } = await dictApi.getAllDict()

  if (code !== 200) return ElMessage.error(message)

  const localList = formatterDict()
  dictList.value = data.concat(localList)

  currentDict.value = dictList.value[0]
})
</script>

<template>
  <main class="page flex min-h-page gap-x-4">
    <DictList
      :dict-list="dictList"
      class="w-[550px] shrink-0 overflow-hidden rounded-md bg-white p-4"
      @change="(row) => (currentDict = row)"
    />
    <ItemList
      class="flex-1 overflow-hidden rounded-md bg-white p-4"
      :dict="currentDict"
    />
  </main>
</template>

<style scoped lang="less">
.page {
  height: var(--default-layout-page-view-min-height);
  overflow: hidden;
}
</style>
